// +----------------------------------------------------------------------
// | likeshop开源商城系统
// +----------------------------------------------------------------------
// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
// | gitee下载：https://gitee.com/likeshop_gitee
// | github下载：https://github.com/likeshop-github
// | 访问官网：https://www.likeshop.cn
// | 访问社区：https://home.likeshop.cn
// | 访问手册：http://doc.likeshop.cn
// | 微信公众号：likeshop技术社区
// | likeshop系列产品在gitee、github等公开渠道开源版本可免费商用，未经许可不能去除前后端官方版权标识
// | likeshop系列产品收费版本务必购买商业授权，购买去版权授权后，方可去除前后端官方版权标识
// | 禁止对系统程序代码以任何目的，任何形式的再发布
// | likeshop团队版权所有并拥有最终解释权
// +----------------------------------------------------------------------
// | author: likeshop.cn.team
// +----------------------------------------------------------------------

<template>
	<view>
		<navbar title="订单详情"></navbar>
		<view class="order-details">
			<view class="header-bg"></view>
			<view class="main">
				<view class="header">
					<!-- <view class="item" v-if="orderDetail.order_status == 0">
						<view class="white lg mb10">等待买家付款</view>
						<view class="white sm row" style="line-height: 26rpx;" v-if="cancelTime > 0">支付剩余 <u-count-down
								separator="zh" :timestamp="cancelTime" separator-color="#fff" color="#fff"
								:separator-size="26" :font-size="26" bg-color="transparent"></u-count-down>
							自动关闭</view>
					</view> -->
					<template v-if="orderDetail.delivery_type == 1">
						<view class="item" v-if="orderDetail.order_status == 1">
							<view class="white lg mb10">等待商家发货</view>
							<view class="white sm">您的商品正在打包中，请耐心等待…</view>
						</view>
						<view class="item" v-if="orderDetail.order_status == 2">
							<view class="white lg mb10">已发货</view>
							<view class="white sm">您的商品正在路中，请耐心等待…</view>
						</view>
						<view class="item" v-if="orderDetail.order_status == 3">
							<view class="white lg mb10">已完成</view>
							<view class="white sm">商品已签收，期待再次购买！</view>
						</view>
						<view class="item" v-if="orderDetail.order_status == 4">
							<view class="white lg mb10">订单已关闭</view>
							<!-- <view class="white sm">原因：超时未支付</view> -->
						</view>
					</template>

					<template v-if="orderDetail.delivery_type == 2">
						<view class="item" v-if="orderDetail.order_status == 1">
							<view class="white lg mb10">待服务</view>
							<view class="white sm">请前往指定医院机构服务</view>
						</view>
						<view class="item" v-if="orderDetail.order_status == 3">
							<view class="white lg mb10">已完成</view>
							<view class="white sm">交易已完成，感谢您的购买！</view>
						</view>
						<view class="item" v-if="orderDetail.order_status == 4">
							<view class="white lg mb10">订单已关闭</view>
						</view>
					</template>
				</view>

				<!-- 快递配送 -->
				<view v-if="orderDetail.delivery_type == 1" class="receiving-card contain" @click="onAddressExpress">
					<u-image class="icon-md mr20" width="44" height="44" src="/static/images/icon_address.png"
						mode="scaleToFill" />
					<view class="receiving-content">
						<view class="md black bold">
							<text>{{ orderDetail.consignee }}</text>
							<text class="ml10">{{ orderDetail.mobile }}</text>
						</view>
						<view class="xs black mt10">{{ orderDetail.delivery_address }}</view>
					</view>
				</view>

				<!-- 门店自提 -->
				<view v-if="false && orderDetail.delivery_type == 2" class="receiving-card contain">
					<u-image class="icon-md mr20" width="44" height="44" src="/static/images/icon_address.png"
						mode="scaleToFill" />
					<view class="receiving-content">
						<text class="md black bold">{{ orderDetail.selffetch_shop.name }}</text>
						<text class="xs black mt10">{{ orderDetail.selffetch_shop.shop_address }}</text>
						<text class="xs muted mt10">
							<text>营业时间：</text>
							<text>{{ orderDetail.selffetch_shop.business_start_time }} -
								{{ orderDetail.selffetch_shop.business_end_time }}</text>
						</text>
					</view>
				</view>

				<!-- 扫码收货 -->
				<view v-if="orderDetail.delivery_type == 2" class="contain receive">
					<view v-if="orderDetail.verification_status" class="delivery--die">
						<u-image src="/static/images/delivery_die.png" width="134" height="98" mode="scaleFill" />
					</view>

					<view class="receive-qr" v-if="showQRSelffetch">
						<text class="xs lighter">请凭二维码核销</text>
						<view class="mt20 qr-contain" :class="{'qr-contain--die': orderDetail.verification_status}"
							ref="qr-image">
							<tki-qrcode ref="qrcode" uni="px" :val="orderDetail.pickup_code" :size="118 * 2"
								:showLoading="false" />
						</view>
						<view class="mt30 xs black qr-code">核销码：{{ orderDetail.pickup_code }}</view>
					</view>

					<view class="nr receive-info">
						<view v-if="false" class="receive-info-item">
							<text class="normal">提货人</text>
							<text class="black">{{ orderDetail.consignee }}</text>
						</view>
						<view class="receive-info-item">
							<text class="normal">联系方式</text>
							<text class="black">{{ orderDetail.mobile }}</text>
						</view>
					</view>
				</view>

				<view class="goods contain">
					<view class="status row-between" v-if="team.status != null">
						<view>拼团状态</view>
						<view :style="'padding: 6rpx 26rpx; ' + (team.status == 2 && 'background-color: #d7d7d7')"
							class="bg-primary br60 white sm">
							{{teamStatus(team.status)}}
						</view>
					</view>
					<order-goods :team="team" :link="true" :list="orderDetail.order_goods"></order-goods>
				</view>
				<view class="goods contain">
					<view class="status row-between">
						<view>订单状态</view>
						<view style="padding: 6rpx 26rpx;" class="bg-primary br60 white sm">
							{{teamStatus(orderDetail.state)}}
						</view>
					</view>
					<order-goods :team="team" :link="true" :list="orderDetail.prodcut"></order-goods>
				</view>
				<view class="price contain">
					<view class="row-between">
						<view>商品金额</view>
						<view class="black">
							<price-format :price="orderDetail.product_price / 100"></price-format>
						</view>
					</view>
					<view class="row-between">
						<view>订单金额</view>
						<view class="black">
							<price-format :price="orderDetail.order_amount / 100"></price-format>
						</view>
					</view>
					<view class="row-between">
						<view>预付金</view>
						<view class="black">
							<price-format
								:price="(orderDetail.actual_order_amount + orderDetail.discount_amount) / 100"></price-format>
						</view>
					</view>
					<!-- <view class="row-between">
						<view>实收金额</view>
						<view class="black">
							<price-format :price="orderDetail.actual_order_amount"></price-format>
						</view>
					</view> -->
					<!-- <view class="row-between">
						<view>运费</view>
						<view class="black">+
							<price-format :price="orderDetail.shipping_price"></price-format>
						</view>
					</view> -->
					<template v-if="orderDetail.discount_msg">
						<view v-for="item in orderDetail.discount_msg" class="row-between">
							<view>{{ item.msg||'新用户优惠' }}</view>
							<view class="primary">-
								<price-format :price="item.fee / 100"></price-format>
							</view>
						</view>
					</template>
					<view class="row-between">
						<view>到店支付尾款</view>
						<view class="black">
							<price-format
								:price="(orderDetail.product_price - orderDetail.actual_order_amount - orderDetail.discount_amount) / 100"></price-format>
						</view>
					</view>
					<!-- <view v-if="orderDetail.integral_amount != 0" class="row-between">
						<view>积分抵扣</view>
						<view class="primary">-
							<price-format :price="orderDetail.integral_amount"></price-format>
						</view>
					</view> -->
					<view class="row-end">
						<view class="lighter">实付金额：</view>
						<view class="primary xl">
							<price-format :first-size="34" :second-size="34"
								:price="orderDetail.actual_order_amount / 100">
							</price-format>
						</view>
					</view>
				</view>

				<!-- <view class="order-info contain">
					<view class="item row" style="align-items: flex-start;">
						<view class="title">买家留言</view>
						<view class="black">{{orderDetail.user_remark || '无'}}</view>
					</view>
				</view> -->
				<view v-if="orderDetail.prodcut && orderDetail.prodcut.merchant && orderDetail.prodcut.merchant.name"
					class="order-info contain">
					<view class="item row-between">
						<view class="mr10">服务门店：{{ orderDetail.prodcut.merchant.name }}</view>
						<!-- <view @click="changeHospital(orderDetail.hospital.id)"style="flex-shrink: 0;">
							<image class="icon-sm ml20" src="/static/images/arrow_right.png"></image> -->
						<!-- </view> -->
					</view>
				</view>
				<view class="order-info contain">
					<view class="item row">
						<view class="title">预约手机号</view>
						<view class="black">{{userInfo.phone}}</view>
					</view>
					<view class="item row">
						<view class="title">订单编号</view>
						<view class="black">{{orderDetail.order_no}}</view>
					</view>
					<view v-if="orderDetail.pay_order_id" class="item row">
						<view class="title">支付交易号</view>
						<view class="black">{{orderDetail.pay_order_id}}</view>
					</view>
					<!-- <view class="item row">
						<view class="title">订单类型</view>
						<view class="black">{{ orderDetail.order_type_desc }}</view>
					</view>
					<view class="item row">
						<view class="title">支付方式</view>
						<view class="black">{{orderDetail.pay_way_text}}</view>
					</view> -->

					<view class="item row">
						<view class="title">下单时间</view>
						<view class="black">{{ ParseTime(orderDetail.order_time) }}</view>
					</view>
					<view v-if="orderDetail.group_limit_num" class="item row">
						<view class="title">订单成团人数</view>
						<view class="black">{{ orderDetail.group_limit_num }}</view>
					</view>
					<view v-if="orderDetail.pay_success_time" class="item row">
						<view class="title">付款时间</view>
						<view class="black">{{ ParseTime(orderDetail.pay_success_time) }}</view>
					</view>
					<view v-if="orderDetail.group_start_time" class="item row">
						<view class="title">成团开始时间</view>
						<view class="black">{{ParseTime(orderDetail.group_start_time) }}</view>
					</view>
					<view v-if="orderDetail.group_time" class="item row">
						<view class="title">成团成功时间</view>
						<view class="black">{{ParseTime(orderDetail.group_time) }}</view>
					</view>
					<view v-if="orderDetail.cancel_time" class="item row">
						<view class="title">取消时间</view>
						<view class="black">{{ParseTime(orderDetail.cancel_time) }}</view>
					</view>
					<view v-if="orderDetail.check_time" class="item row">
						<view class="title">核销时间</view>
						<view class="black">{{ParseTime(orderDetail.check_time) }}</view>
					</view>

				</view>
				<view class="footer bg-white row fixed">
					<view style="flex: 1"></view>
					<view v-if="orderDetail.cancel_btn">
						<button size="sm" class="plain br60" hover-class="none" @tap="cancelOrder">取消订单</button>
					</view>
					<navigator v-if="orderDetail.delivery_btn" hover-class="none"
						:url="'/bundle/pages/goods_logistics/goods_logistics?id=' + orderDetail.id">
						<button size="sm" class="plain br60" hover-class="none">查看物流</button>
					</navigator>
					<view v-if="orderDetail.take_btn" class="ml20">
						<button size="sm" class="plain br60 primary red" hover-class="none"
							@tap.stop="comfirmOrder">确认收货</button>
					</view>
					<view v-if="orderDetail.del_btn">
						<button size="sm" class="plain br60" hover-class="none" @tap="delOrder">删除订单</button>
					</view>
					<view class="ml20" v-if="orderDetail.pay_btn">
						<button size="sm" class="bg-primary br60 white" @tap="payNow">立即付款</button>
					</view>
					<view v-if="orderDetail.state>=0 && orderDetail.state<=2" class="mr20">
						<button size="sm" class="plain br60 lighter" hover-class="none"
							@tap.stop="cancelOrder(orderDetail.id)">
							取消订单
						</button>
					</view>
					<view v-if="orderDetail.state==0" class="ml20">
						<button size="sm" class="btn bg-primary br60 white" @tap.stop="payNow(orderDetail.id)">
							立即付款
						</button>
					</view>

				</view>
			</view>
		</view>

		<loading-view v-if="isFirstLoading"></loading-view>
		<order-dialog ref="orderDialog" :orderId="orderDetail.id" :type="type" @refresh="onRefresh"></order-dialog>
		<loading-view v-if="showLoading" background-color="transparent" :size="50"></loading-view>
	</view>
</template>

<script>
	import {
		getOrderList
	} from '@/api/order';
	import {
		prepay
	} from '@/api/app';
	import {
		wxpay,
		alipay
	} from '@/utils/pay';
	import {
		mapGetters
	} from 'vuex';
	import ParseTime from '@/utils/date-expand'
	import PageExposure from "@/mixins/page_exposure.js"

	export default {
		mixins: [PageExposure],
		data() {
			return {
				orderDetail: {},
				team: {},
				isFirstLoading: true,
				type: 0,
				cancelTime: 0,
				showCancel: "",
				showLoading: false,
				imageQR: '',
				ParseTime
			};
		},

		components: {},
		props: {},

		onLoad: function(options) {
			this.id = options.id;
			this.getOrderDetailFun();
		},

		onUnload() {
			uni.$off('payment')
		},

		methods: {
			onRefresh() {
				uni.$emit("refreshorder")
				const {
					type
				} = this
				if ([0, 2].includes(type)) {
					this.getOrderDetailFun();
				} else if (type == 1) {
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				}
			},
			orderDialog() {
				this.$refs.orderDialog.open()
			},

			delOrder() {
				this.type = 1
				this.$nextTick(() => {
					this.orderDialog();
				});
			},
			changeHospital(id) {
				uni.navigateTo({
					url: '/pages/hospital/detail/detail?id=' + id
				});
			},
			comfirmOrder() {
				this.type = 2
				this.$nextTick(() => {
					this.orderDialog();
				});
			},

			cancelOrder() {
				this.type = 0
				this.$nextTick(() => {
					this.orderDialog();
				});
			},

			payNow(id) {
				// uni.$on('payment', params => {
				// 	setTimeout(() => {
				// 		if (params.result) {
				// 			this.$toast({
				// 				title: "支付成功"
				// 			})
				// 			this.getOrderDetailFun();
				// 			uni.$emit("refreshorder")
				// 		} else {
				// 			this.$toast({
				// 				title: "支付失败"
				// 			})
				// 		}
				// 	}, 500)
				// })

				// uni.navigateTo({
				// 	url: `/pages/payment/payment?from=${'order'}&order_id=${this.id}`
				// })
				this.showLoading = true
				// uni.navigateTo({
				// 	url: `/pages/payment/payment?from=${'order'}&order_id=${id}`
				// })

				prepay({
					from: 'order',
					order_id: id
				}).then(res => {
					let args = res.data;
					this.showLoading = false
					if (res.s === 0) {
						wxpay(res.d.pay_data).then((resPay) => {
							if (resPay == 'success') {
								this.$toast({
									title: "支付成功"
								})
								uni.$emit("refreshorder")
							}
						})
					} else if (res.code == 20001) {
						alipay(args).then((resPay) => {
							if (resPay == 'success') {
								this.$toast({
									title: "支付成功"
								})
								uni.$emit("refreshorder")
							}
						})
					}
				});

			},

			getOrderDetailFun() {
				getOrderList({
					id: this.id
				}).then(res => {
					console.log(res)
					if (res.s === 0) {
						this.cancelTime = 900;
						this.orderDetail = res.d.data[0]
						this.team = res.d || {}
						this.$nextTick(() => {
							this.isFirstLoading = false
						});
					} else {
						setTimeout(() => uni.navigateBack(), 1500)
					}
					return res.data
				}).then(data => {

				})

			},
		},
		computed: {
			...mapGetters(['userInfo']),
			showQRSelffetch() {
				let result = false

				if (this.orderDetail.order_status) {
					result = true
				}

				if (this.orderDetail.order_type == 2) {
					this.orderDetail.team_status == 1 ?
						result = true :
						result = false
				}

				return result
			},
			teamStatus() {
				return (status) => {
					switch (status) {
						case 0:
							return '待支付'
						case -1:
							return '取消'
						case 1:
							return '支付成功，待成团'
						case 2:
							return '拼团成功，待核销'
						case 3:
							return '核销完成'
					}
				}
			},
			getOrderType() {
				return (type) => {
					switch (type) {
						case 0:
							return '普通订单'
						case 1:
							return '秒杀订单'
						case 2:
							return '拼团订单'
						case 3:
							return '砍价订单'
					}
				}
			},
		},
	};
</script>
<style lang="scss">
	.order-details {
		position: relative;
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	}

	.order-details .header-bg {
		position: absolute;
		top: 0;
		width: 100%;
		height: 200rpx;
		background-color: $-color-primary;
		z-index: 0;
	}

	.order-details .goods .status {
		height: 88rpx;
		padding: 0 20rpx;
	}

	.order-details .main {
		position: relative;
		z-index: 1;
	}

	.order-details .contain {
		margin: 0 20rpx 20rpx;
		border-radius: 14rpx;
		background-color: #fff;
	}

	.order-details .header {
		padding: 24rpx 40rpx;
		box-sizing: border-box;
	}

	.order-details .img-line {
		height: 1.5px;
		width: 100%;
		display: block;
	}

	.order-details .address-wrap {
		height: 164rpx;
		padding: 0 24rpx;
	}

	.order-details .order-info {
		padding: 12rpx 0;
	}

	.order-details .order-info .item {
		padding: 12rpx 24rpx;
	}

	.order-details .order-info .item .title {
		width: 180rpx;
		flex: none;
	}

	.order-details .price>view {
		height: 60rpx;
		padding: 0 24rpx;
	}

	.order-details .footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		padding: 0 24rpx;
		box-sizing: content-box;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.footer .plain {
		border: 1px solid #BBBBBB;
	}

	.footer .plain.red {
		border: 1px solid $-color-primary;
	}

	.tips-dialog {
		height: 230rpx;
		width: 100%;
	}

	.order-details .invite-btn {
		background: linear-gradient(270deg, #FF2C3C 0%, #F95F2F 100%);
		margin: 30rpx 26rpx 40rpx;
	}

	.receiving-card {
		display: flex;
		align-items: center;
		min-height: 160rpx;
		padding: 20rpx;
		border-top: 1px solid #F2F2F2;
	}

	.receiving-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.receive {
		position: relative;
	}

	.delivery--die {
		position: absolute;
		top: 0;
		right: 30rpx;
	}

	.receive-qr {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 460rpx;
	}

	.qr-contain {
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 140px;
		height: 140px;
		padding: 8px;
		border: 1px solid #CCCCCC;
		border-radius: 5px;
	}

	.qr-contain--die {
		position: relative;
	}

	.qr-contain--die::before {
		position: absolute;
		z-index: 99;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		content: '';
		background-color: rgba(255, 255, 255, .5);
	}

	.qr-code {
		padding: 8rpx 30rpx;
		border-radius: 60px;
		background-color: #F6F6F6;
	}

	.receive-info {
		padding-left: 20rpx;
	}

	.receive-info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		padding-right: 30rpx;
	}

	.receive-info-item:nth-child(n+2) {
		border-top: $-dashed-border;
	}
</style>